<template>
	<view class="content">
		<!-- 顶部标签栏（修复后无报错） -->
		<tabBanner :list="tabs" @onTabClick="tabClick" :current="activeIndex" rightIcon="search" activeColor="#000"
			activesize="40rpx" fontsize="40rpx" span="30px" />

		<!-- 内容区域（移除listScroll，直接渲染，避免组件遮挡） -->
		<view class="home-list">
			<swiper class="home-swiper" @change="changeSwiper" :current="activeIndex">
				<swiper-item class="swiper-item" v-for="(item,index) in tabs" :key="index">
					<!-- 话题榜内容（index=1，直接渲染，无组件包裹） -->
					<view class="topic-list" v-if="index===1">
						<!-- 话题-1 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t1.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">曼联客场不败场次在英超排名第二，阿森纳27次客场不败</text></view>
								<view class="contentbox">
									曼联客场对阵阿斯顿维拉，这场比赛的结果对于现阶段的曼联来说影响并不是很大，但如果一旦曼联输球，他们的同城死敌曼城就将提前加冕本赛季的英超冠军。在这样的大背景下，曼联众将士自然是不愿意间接助攻死敌夺冠，因此在上半场落后的情况下，曼联在下半场发起了猛烈地反扑，最终红魔以3-1的比分战胜了对手。
								</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y10.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y3.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y6.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y5.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">119观点</view>
								</view>
							</view>
						</view>

						<!-- 话题-2 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t2.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">#司机为救婴儿闯红灯#</text></view>
								<view class="contentbox">网红约司机为救婴儿连闯3红灯，警察查实后取消处罚。</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y4.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y2.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">1419观点</view>
									<view class="hotimage-y">热</view>
								</view>
							</view>
						</view>

						<!-- 话题-3 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t3.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">曼联客场不败场次在英超排名第二，阿森纳27次客场不败</text></view>
								<view class="contentbox">
									曼联客场对阵阿斯顿维拉，这场比赛的结果对于现阶段的曼联来说影响并不是很大，但如果一旦曼联输球，他们的同城死敌曼城就将提前加冕本赛季的英超冠军。在这样的大背景下，曼联众将士自然是不愿意间接助攻死敌夺冠，因此在上半场落后的情况下，曼联在下半场发起了猛烈地反扑，最终红魔以3-1的比分战胜了对手。
								</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y10.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y3.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y6.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y5.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">119观点</view>
								</view>
							</view>
						</view>

						<!-- 话题-4 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t4.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">#司机为救婴儿闯红灯#</text></view>
								<view class="contentbox">网红约司机为救婴儿连闯3红灯，警察查实后取消处罚。</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y4.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y2.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">1419观点</view>
									<view class="hotimage-y">热</view>
								</view>
							</view>
						</view>

						<!-- 话题-5 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t5.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">曼联客场不败场次在英超排名第二，阿森纳27次客场不败</text></view>
								<view class="contentbox">
									曼联客场对阵阿斯顿维拉，这场比赛的结果对于现阶段的曼联来说影响并不是很大，但如果一旦曼联输球，他们的同城死敌曼城就将提前加冕本赛季的英超冠军。在这样的大背景下，曼联众将士自然是不愿意间接助攻死敌夺冠，因此在上半场落后的情况下，曼联在下半场发起了猛烈地反扑，最终红魔以3-1的比分战胜了对手。
								</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y10.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y3.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y6.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y5.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">119观点</view>
								</view>
							</view>
						</view>

						<!-- 话题-6 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t6.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">#司机为救婴儿闯红灯#</text></view>
								<view class="contentbox">网红约司机为救婴儿连闯3红灯，警察查实后取消处罚。</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y4.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y2.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">1419观点</view>
									<view class="hotimage-y">热</view>
								</view>
							</view>
						</view>

						<!-- 话题-7 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t7.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">曼联客场不败场次在英超排名第二，阿森纳27次客场不败</text></view>
								<view class="contentbox">
									曼联客场对阵阿斯顿维拉，这场比赛的结果对于现阶段的曼联来说影响并不是很大，但如果一旦曼联输球，他们的同城死敌曼城就将提前加冕本赛季的英超冠军。在这样的大背景下，曼联众将士自然是不愿意间接助攻死敌夺冠，因此在上半场落后的情况下，曼联在下半场发起了猛烈地反扑，最终红魔以3-1的比分战胜了对手。
								</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y10.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y3.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y6.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y5.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">119观点</view>
								</view>
							</view>
						</view>

						<!-- 话题-8 -->
						<view class="ht">
							<view>
								<image class="redindex" src="/static/images/tnumbers/t8.png" mode="widthFix"></image>
							</view>
							<view class="hts">
								<view class="titlebox"><text class="item-xx">#司机为救婴儿闯红灯#</text></view>
								<view class="contentbox">网红约司机为救婴儿连闯3红灯，警察查实后取消处罚。</view>
								<view class="iconbox">
									<view class="hotimage">
										<image class="img1" src="/static/images/circle/y4.jpg" mode="widthFix"></image>
										<image class="img2" src="/static/images/circle/y2.jpg" mode="widthFix"></image>
										<image class="img3" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
										<image class="img4" src="/static/images/circle/y8.jpg" mode="widthFix"></image>
									</view>
									<view class="hotimage-x">1419观点</view>
									<view class="hotimage-y">热</view>
								</view>
							</view>
						</view>

					</view>

					<!-- 其他标签（追踪、观点榜）的提示 -->
					<view v-else class="developing-tip">{{item}}模块开发中</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	// 组件引入路径（确保components文件夹在根目录）
	import tabBanner from '../../../components/tabBanner.vue'

	// 移除listScroll组件引入（避免组件缺失导致的问题）
	// import listScroll from '../../../components/listScroll.vue'

	export default {
		components: {
			tabBanner,
			// listScroll // 移除组件注册
		},
		data() {
			return {
				tabs: ["追踪", "话题榜", "观点榜"],
				activeIndex: 1, // 初始显示话题榜（有内容的标签）
				isLogin: false
			}
		},
		onShow() {
			this.isLogin = !!uni.getStorageSync('userToken');
		},
		methods: {
			tabClick(index) {
				uni.showToast({
					title: "点击了：" + this.tabs[index],
					icon: "none"
				});
				this.activeIndex = index; // 父组件更新索引，无报错
			},
			changeSwiper(e) {
				this.activeIndex = e.detail.current; // swiper与标签栏同步
			}
		}
	}
</script>

<style scoped>
	/* 基础页面样式（确保内容区占满屏幕） */
	page {
		min-height: 100vh;
		background-color: #f5f5f5;
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 标签栏容器（确保高度足够） */
	.home-list {
		width: 100%;
		flex: 1;
		box-sizing: border-box;
		padding: 0 15rpx;
	}

	/* Swiper样式（关键：设置固定高度，避免内容被压缩） */
	.home-swiper {
		height: calc(100vh - 80rpx);
		/* 减去标签栏高度（80rpx），占满剩余空间 */
		width: 100%;
	}

	.swiper-item {
		height: 100%;
		width: 100%;
		overflow-y: auto;
		/* 内容超出时可滚动 */
	}

	/* 话题列表容器（直接渲染，无遮挡） */
	.topic-list {
		width: 100%;
		padding: 10rpx 0;
	}

	/* 开发中提示样式 */
	.developing-tip {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999999;
	}

	/* 话题项样式（确保文字可见） */
	.ht {
		border-bottom: 1rpx solid #CCD0D9;
		margin-bottom: 20rpx;
		padding: 15rpx 0;
		display: flex;
		align-items: flex-start;
		/* 排名图标与文字顶部对齐 */
	}

	.hts {
		margin-left: 15rpx;
		flex: 1;
	}

	/* 标题文字（加粗，深色，确保可见） */
	.titlebox {
		font-size: 26rpx;
		color: #333333 !important;
		/* 强制深色，避免与背景融合 */
		margin-bottom: 10rpx;
		display: block;
	}

	.item-xx {
		font-weight: bold;
	}

	/* 内容文字（深色，行高适中） */
	.contentbox {
		font-size: 22rpx;
		color: #666666 !important;
		/* 强制深色 */
		line-height: 36rpx;
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 排名图标 */
	.redindex {
		width: 30rpx;
		height: 30rpx;
		margin-top: 5rpx;
	}

	/* 底部图标+观点数样式 */
	.iconbox {
		display: flex;
		align-items: center;
		gap: 15rpx;
		font-size: 20rpx;
		color: #999999;
	}

	.hotimage {
		position: relative;
		width: 100rpx;
		height: 30rpx;
	}

	.hotimage image {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
		position: absolute;
	}

	.hotimage .img1 {
		left: 0;
		z-index: 4;
	}

	.hotimage .img2 {
		left: 20rpx;
		z-index: 3;
	}

	.hotimage .img3 {
		left: 40rpx;
		z-index: 2;
	}

	.hotimage .img4 {
		left: 60rpx;
		z-index: 1;
	}

	.hotimage-x {
		white-space: nowrap;
	}

	.hotimage-y {
		border: 1rpx solid #DD524D;
		width: 40rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		color: #DD524D;
		border-radius: 14rpx;
		font-size: 18rpx;
	}

	/* 兼容tabBanner组件样式 */
	::v-deep .tab {
		border-bottom: 1px solid #eee;
	}
</style>